﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">
    <link href="/shop/templates/yeshou/css/swiper-3.2.7.min.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="/shop/templates/cdrt/css/Details.css" />
    <link type="text/css" rel="stylesheet" href="/shop/templates/cdrt/css/style_1.css">
    <link rel="stylesheet" type="text/css" href="/css/weui/weui.min.css" />
    <script type="text/javascript" src="/shop/templates/cdrt/js/zepto.js"></script>
    <script src="/shop/templates/cdrt/js/jquery-2.0.2.min.js"></script>
    <script src="../../../scripts/jquery/jquery.query.js"></script>
    <style type="text/css">
        html {
            font-family: 'Microsoft YaHei';
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ol, ul {
            list-style: none;
        }

        .header {
            height: 45px;
            /*background-color: rgba(255,68,0,1);*/
            background-color: #0059a9;
            padding: 0 15px;
            line-height: 45px;
        }

            .header .bar {
                text-align: center;
                font-size: 19px;
                color: #fff;
                position: relative;
                height: 45px;
            }

                .header .bar .callback {
                    display: block;
                    position: absolute;
                    height: 12px;
                    width: 12px;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    border: 2px solid #fff;
                    top: 12px;
                    border-right-color: #0059a9;
                    border-top-color: #0059a9;
                }

        .main {
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .goods-img {
            height: 210px;
            width: 100%;
        }

            .goods-img img {
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -160px;
                height: 210px;
                width: 320px;
            }

        .goods-info {
            border-top: 1px solid #DFDFDF;
            padding: 10px 10px;
        }

            .goods-info .name {
                overflow: hidden;
                max-height: 40px;
                font-size: 15px;
                padding-bottom: 5px;
                font-weight: 700;
            }

            .goods-info .desc {
                color: Black;
                font-size: 12px;
            }

        .notice {
            padding: 10px;
            overflow: hidden;
        }

            .notice h3 {
                border-left: 5px solid #dfdfdf;
                padding-left: 5px;
                height: 30px;
                line-height: 30px;
                font-weight: normal;
            }

            .notice p {
                text-indent: 20px;
                font-size: 14px;
            }

        .bottom {
            position: fixed;
            border-top: 1px solid #dfdfdf;
            height: 40px;
            padding: 10px;
            bottom: 0;
            left: 0;
            right: 0;
        }

            .bottom .price {
                position: absolute;
                left: 10px;
                height: 40px;
                line-height: 40px;
                color: #ff4300;
            }

            .bottom .submit {
                position: absolute;
                width: 150px;
                height: 40px;
                line-height: 40px;
                right: 10px;
                display: block;
                border-radius: 4px;
                background-clip: padding-box;
                background-color: #66c800;
                color: #fff;
                text-align: center;
            }
    </style>
</head>
<body>
    <div class="main">
        <div class="goods-img">
            <div class="swiper-container" style="height: 210px;">
                <div class="swiper-wrapper">
                    <vt:foreach from="$model.albums" item="albums">
                        <div class="swiper-slide">
                            <img src="{$albums.original_path}" alt="">
                        </div>
                    </vt:foreach>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="goods-info">
            <div class="name">{$model.productName}</div>
            <div class="desc">{$model.shortDesc}</div>
        </div>
        <div class="goods-info">
            <div class="name">简介</div>
            <div class="desc" style="text-align: left">
                {$model.description}
            </div>
            <div class="details_text" style="padding-bottom: 40px">
                <div class="details_jg">
                    商城价格：<span id="spanprice" name="{$model.salePrice}">￥{$model.salePrice}</span> 库存数量：<span id="spanstock" name="{$model.stock}" id="stockcount">{$model.stock} </span>
                </div>
                <a class="activemsg" href=""></a>
                <div class="details_nr">
                    购买数量：<span class="count_num">
                        <a href="javascript:void(0)" id="btnMinus" class="inputcheckbox">-</a>
                        <div class="count-input">
                            <input type="text" maxlength="2" value="1" id="proCount" readonly="readonly" />
                        </div>
                        <a href="javascript:void(0)" id="btnAdd" class="inputcheckbox">+</a>
                    </span>
                    <span class="count-msg" id="stockStatus"></span>
                </div>
            </div>
            <div class="details_but" style="display:none" id="you">
                <a href="javascript:void(0);" id="buyImmediately">立即购买</a>
                <!--订金尾款、限时抢购、二维码、套装走快捷购物流程-->
                <a href="javascript:void(0);" class="gwc" id="addCart">加入购物车</a>
            </div>
        </div>
    </div>
    <script src="/shop/templates/yeshou/js/swiper-3.2.7.min.js"></script>
    <script type="text/javascript">
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            // 分页器
            pagination: '.swiper-pagination'
        });

        $(document).ready(function (e) {
            var id = $.query.get("pid");
            //购买数量增加或减少
            var doEvent = document.hasOwnProperty("ontouchstart") ? "tap" : "click";
            //减少
            $("#btnMinus").on(doEvent, function () {
                var count = parseInt($("#proCount").val());
                if (count > 1) {
                    $("#proCount").val(--count);
                }
            });

            //增加，最多99个
            $("#btnAdd").on(doEvent, function () {
                var count = parseInt($("#proCount").val());
                if (count < 100) {
                    $("#proCount").val(++count);
                }
            });

            //有货
            function hasStock() {
                $("#stockStatus").text("");
            }
            //无货
            function noStock() {
                $("#stockStatus").text("无货");
            }

            function buyStockCheck(type) {
                var buycount = parseInt($("#proCount").val());
                $.getJSON("/shop/shop.ashx?wid={$wid}&id=" + id + "&myact=checkid", function (d, status) {
                    if (typeof (d.data) == "undefined") {
                        alert('购买出现问题，请联系管理员。');
                    }
                    else if (d.data >= buycount) {
                        if (type == 'addCart') { addCart(); }
                        else if (type == 'buyImmediately') { buyImmediately(); }
                    }
                    else if (d.data > 0 && d.data < buycount) {
                        $('#stockcount').text(d.data);
                        alert('抱歉，所选商品库存不足。');
                    }
                    else if (d.data <= 0) {
                        noStock();
                        $("#you").hide();
                        alert('抱歉，所选商品库存不足。');
                    }
                });
            }

            function addCart() {
                var bc = $("#proCount").val();
                var productid = id;
                var skuid = $('#hidsku').val();
                var jiage = $(".details_jg span").attr('name');
                $.getJSON("/shop/shopmgr.ashx?skuid=" + skuid + "&wid={$wid}&productid=" + productid + "&bc=" + bc + "&openid={$openid}&attr=" + "" + "&totprice=" + jiage + "&myact=addCart&v=" + Math.random(), function (d, status) {
                    if (d.errCode == "0") {
                        location.href = "{$carturl}" + "&rtn=shop";
                    } else {
                        alert("购物车添加失败");
                    }
                });
            }

            function buyImmediately() {
                var bc = $("#proCount").val();
                var productid = id;
                var skuid = $('#hidsku').val();
                var jiage = $(".details_jg span").attr('name');
                $.getJSON("/shop/shopmgr.ashx?skuid=" + skuid + "&wid={$wid}&productid=" + productid + "&bc=" + bc + "&openid={$openid}&attr=" + "" + "&totprice=" + jiage + "&myact=addCart", function (d, status) {
                    if (d.errCode == "0") {
                        location.href = "/shop/confirmOrder.aspx?rtn=shop&wid={$wid}&openid={$openid}";
                    }
                    else {
                        alert("购买失败,请联系管理员");
                    }
                });
            }

            //加入购物车
            $("#addCart").click(function () {
                buyStockCheck('addCart');
            });

            //立即购买
            $("#buyImmediately").click(function () {
                buyStockCheck('buyImmediately');
            });
        });
    </script>
</body>
</html>